<template>
  <!--    联系我们商业合作-->
  <div class="box">
    <van-nav-bar
        left-arrow
        left-text="返回"
        title="联系我们"
        @click-left="onClickLeft"
    />
    <div class="user">
      <div class="user-avatar">
        <img :src="this.list.avatar" alt="">
      </div>
      <div class="leave-message">
        <van-field
            v-model="message"
            label="建议"
            maxlength="666"
            placeholder="请输入建议"
            rows="2"
            show-word-limit
            type="textarea"
        />
        <button @click="onsubmit">提交</button>
      </div>
    </div>
    <div class="hezuo">
      <div class="user-cooperation">
        <img alt="" src="../assets/images/123.png">
      </div>
      <div class="text">商业合作扫下方二维码</div>

    </div>

    <div class="code">
      <img alt="" src="../assets/images/qCode.jpg">
      <img alt="" src="../assets/images/bCode.jpg">
    </div>

  </div>
</template>

<script>
import {userInfo} from "@/api/api";
import {Notify} from "vant";

export default {
  name: "BusinessCooperation",
  data() {
    return {
      message: '',
      list: [],
    }
  },
  created() {
    userInfo().then(res => {
      console.log(res)
      this.list = res.data;
    })
  },
  methods: {
    onsubmit() {
      if (this.message != '') {
        Notify({type: 'success', message: '提交成功！'});
        this.message = '';
      }else {
        Notify({type: 'warning', message: '未检测到内容！'});
      }
    },
    onClickLeft() {
      window.history.go(-1)
    },
  }
}
</script>

<style lang="less" scoped>
.box {
  background-color: #e2f1e6;
  //background-color: #DFFCE6;

  height: 100vh;
  box-sizing: border-box;
}

.user {
  //height: 50%;
  //height: 30vh;
  width: 100%;
  //background-color: #cccaca;
  display: flex;
  flex-wrap: nowrap;
  padding: 10px 10px;
  padding-top: 20px;
  box-sizing: border-box;

  .user-avatar {
    width: 70px;
    height: 70px;
    box-sizing: border-box;


    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      box-shadow: 0 0 5px red;
      margin-top: 5px;

    }
  }

  .leave-message {
    width: 80%;
    padding-left: 7px;

    button {
      float: right;
    }

  }
}

.hezuo {
  padding: 0 10px;
  display: flex;
  flex-wrap: nowrap;
  margin-top: 50px;
}

.user-cooperation {
  width: 80px;
  height: 80px;
  //box-sizing: border-box;


  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 5px red;


  }
}

.text {
  width: 100%;
  border: 1px solid white;
  border-radius: 10px;
  line-height: 80px;
  text-align: center;
  margin-left: 7px;
}

.code {

  //background-color: chocolate;
  //margin-top: 50px;
  padding: 20px;
  padding-top: 70px;

  img {
    width: 50%;
    padding: 5px;
    box-sizing: border-box;
  }

}
</style>